<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>计划任务</span>
    </div>
    <div class="row">
      <div class="col-md-12 ">
        <form id="searchForm" class="form-inline">
            <div class="form-group jsg-group">
              <label class="sr-only" for="exampleInputEmail3">任务名称、设备名称</label>
              <input type="text" class="form-control jsg-group-input" id="exampleInputEmail3" placeholder="任务名称、设备名称" v-model="plan">
            </div>          
          <button type="button" @click="loadData" class="btn btn-default">搜索</button>
          <router-link :to="{name: 'AddPlan', params: {method: 'add', planId: 0}}" class="btn btn-default">添加计划任务</router-link>
        </form>
        <div class="table-responsive sbzgl-tab-list">
          <table class="table table-bordered" id="tblData">
            <thead>
              <tr>
                <th width="5%">序号</th>
                <th width="10%">任务名称</th>
                <th width="13%">设备名称</th>
                <th width="8%">任务状态</th>
                <th width="7%">任务事件</th>
                <th width="7%">循环周期</th>
                <th width="12%">开始时间</th>
                <th width="12%">结束时间</th>
                <th width="7%">创建者</th>
                <th width="12%">创建时间</th>
                <th width="7%">操作</th>  
              </tr>
            </thead>
            <tbody> 
              <tr v-for="(item, index) in page.list">
                <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
                <td>{{item.planname}}</td>
                <td>{{item.devicename}}</td>
                <td>
                  <i-switch v-if="true" @on-change="toggleStatus($event, item.deviceid, item.planname)" :value="item.state | state">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </td>
                <td>{{item.tasktype}}</td>
                <td>{{item.loopflag | loopflagValue}}</td>
                <td>{{item.begdate}} {{(item.begdate + ' '+ item.begtime) | moment('HH:mm')}}</td>
                <td>{{item.enddate}} {{(item.enddate + ' '+ item.endtime) | moment('HH:mm')}}</td>
                <td>{{item.username}}</td>
                <td>{{item.createtime}}</td>
                <td>
                  <router-link :to="{ name: 'AddPlan', params: {method:'edit', planId: item.planid} }"><span class="glyphicon glyphicon-edit"></span></router-link>&nbsp;
                  <a @click="del(item.deviceid, item.planname)" title=""><span class="glyphicon glyphicon-trash"></span></a>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="pull-right">
            <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
          </div>
        </div>
      </div>
    </div>   
  </div>
</template>

<script>
  import page from '@/components/Page.vue'
  import moment from 'moment'
  import 'iview/dist/styles/iview.css'

  export default {
    name: 'PlanTask',
    components: { 'my-page': page },
    data: function () {
      return {
        plan: '',
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        }
      }
    },
    created: function () {
      this.loadData()
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'PlanSearch', plan: this.plan}).then(response => {
          this.page.allList = response.data.HedaACK.Body.planlist || []
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      del: function (id, name) {
        window.duang.confirm('确认要删除《' + name + '》计划吗？', () => {
          this.$http.post('/api/hedacmdreq', {method: 'DeletePlan', deviceid: id, planname: name}).then(response => {
            var body = response.data.HedaACK.Body
            if (body.retCode === '0') {
              window.duang.msg(true, body.retMsg)
              this.loadData()
            }
          })
        })
      },
      toggleStatus: function (state, deviceId, planName) {
        var status = state ? 1 : 0
        this.$http.post('/api/hedacmdreq', {method: 'ClosePlan', deviceid: deviceId, planname: planName, state: status}).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            this.loadData()
            window.duang.msg(true, body.retMsg)
          }
        })
      }
    },
    filters: {
      moment: function (value, format) {
        format = format || 'YYYY-MM-DD HH:mm:ss'
        return moment(value).format(format)
      },
      loopflagValue: function (value) {
        var map = {
          '0': '按天',
          '1': '按周',
          '2': '按月'
        }
        return map[value]
      },
      state: function (value) {
        console.log(value === '1')
        return value === '1'
      }
    }
  }
</script>
